 <!DOCTYPE html>
 <html lang="en">

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../../lib/bootstrap-5.3.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="../../lib/layui-v2.8.12/src/css/layui.css">
   <script src="../../lib/layui-v2.8.12/src/layui.js"></script>
   <link rel="stylesheet" href="../../lib/bootstrap-5.3.0/js/bootstrap.bundle.min.js">
   <link rel="stylesheet" href="../../css/common.css">
   <link rel="stylesheet" href="../../css/base.css">
   <title>Document</title>
   <style>
     .main {
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
     }

     .card {
       width: 100%;
     }

     .card-title {
       font-size: 30px;
       font-weight: bold;
       margin: 0 auto;
       text-align: center;
       margin-bottom: 20px;
     }

     .layui-text {
       font-size: 16px;
     }

     .left {
       width: 690px;
       height: 500px;
       padding: 30px;
       float: left;
     }

     .right {
       width: 480px;
       height: 500px;
       padding: 20px;
       float: right;
     }
   </style>
 </head>

 <body>
   <div class="main">
     <div class="left">
       <table class="layui-hide" id="table_user" lay-filter="test"></table>
     </div>
     <div class="right">
       <div class="card">
         <div class="card-body">
           <h4 class="card-title">John Doe</h4>
           <blockquote class="layui-elem-quote layui-text">
           </blockquote>
         </div>
       </div>
     </div>
   </div>
   <?php
    DEFINE('DB_USER', 'worldcup');
    DEFINE('DB_PASSWORD', '123456');
    DEFINE('DB_HOST', 'localhost');
    DEFINE('DB_NAME', 'worldcup');

    $dbc = @mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
    if (!$dbc) {
      die('Could not to connect to Mysql:' . mysqli_connect_error());
    }
    mysqli_set_charset($dbc, 'utf8');

    $gameId = $_GET['gameId'];
    $sql = "select e.*,g.comment from game g,events e where g.game_id=e.game_id and g.game_id=$gameId;";
    $res = mysqli_query($dbc, $sql);
    if (!$res) {
      printf("Error: %s\n", mysqli_error($dbc));
      exit();
    }
    $Array = array();
    $i = 0;
    while ($row = mysqli_fetch_row($res)) {
      $Array[$i]['game_id'] = $row[1];
      $teamId = $row[2];
      $sql1 = "select team_name from team where team_id=$teamId;";
      $res1 = mysqli_query($dbc, $sql1);
      $result1 = mysqli_fetch_assoc($res1);
      $team_name = $result1['team_name'];
      $Array[$i]['team_name'] = $team_name;

      $playerId = $row[3];
      $sql2 = "select player_name from player where player_id=$playerId;";
      $res2 = mysqli_query($dbc, $sql2);
      $result2 = mysqli_fetch_assoc($res2);
      $player_name = $result2['player_name'];
      $Array[$i]['player_name'] = $player_name;
      $Array[$i]['time'] = $row[4];
      $Array[$i]['desc'] = $row[6];
      $i = $i + 1;
    }
    ?>
   <script>
     //渲染卡片
      let res1 = <?php echo json_encode($Array); ?>;
     document.querySelector('.card-title').innerHTML = '比赛描述'
      document.querySelector('.layui-text').innerHTML = res1[0].desc
     let res = <?php echo json_encode($Array); ?>;
     console.log(res);
     let data = []
     data = res;
     //渲染表格
     const renderTable = () => {
       //显示数组中的元素
       layui.use(['table'], function() {
         table = layui.table
         table.render({
           elem: '#table_user',
           height: 450,
           data: data,
           page: true, //开启分页
           // totalRow: true, // 开启合计行
           autoSort: true,
           skin: 'grid',
           limit: 8, //设置每页显示条数,根据自己项目情况去设置
           limits: [8, 10, 20, 30, 50], //设置每页条数下拉框的选择项,就是分页那一栏的下拉框选项  
           cols: [
             [ //表头
               {
                 type: 'checkbox',
                 fixed: 'left'
               },
               {
                 field: 'game_id',
                 fixed: 'left',
                 title: '比赛Id',
                 align: 'center',
                 width: 80,
                 style: 'background-color: #eee;',
                 sort: true,
                 // type: 'numbers'
               },
               {
                 field: 'team_name',
                 title: '球队名',
                 align: 'center',
                 width: 140,
                 style: 'font-weight:bold;',
               },
               {
                 field: 'player_name',
                 title: '球员名',
                 align: 'center',
                 width: 140,
                 style: 'font-weight:bold;',
               }, {
                 field: 'time',
                 title: '进球时间',
                 width: 215,
                 align: 'center',
                 style: 'font-weight:bold;',
               }
             ]
           ],
           size: 'lg'
         })

       })
     }
     renderTable();
     renderTable();
   </script>
 </body>

 </html>